开发者 | 用 Mapbox Studio 设计个建筑，怎么这么费劲呢？
Mapbox 能做动态地图，那么静态印刷品怎么办？
这个问题可能大多数朋友并没有想过吧，可在作者的脑海中却挥之不去。这一期开发者故事来源 Mapbox 2018 开发者图鉴中的 —— L/C，他想找到一种解决方法，用 Mapbox Studio 也能设计出完美的印刷品地图。
他将以建筑物设计为例，为我们娓娓道来他的坑和收获。
🔥
关于本期分享者
L/C
GIS 专业中奥联合培养双硕士，研究灾害管理方面的大数据可视化，入选 Mapbox 2018 开发者图鉴
🔥
正文开始
👀脑洞是这么来的
因为目标是让在线的 Mapbox 样式变得更像印刷品的质感，然后想到了设计规划行业中其实很多时候会用 CAD 制图。那么，做一个像 CAD 风格的东西来表示建筑物如何？
于是，我打算画一个这样的效果来显示建筑物：
分析一下，这个图案分为两个部分：
外细线框（黑色）
与边缘内侧对齐的斜线图案（蓝色）
显然，外边的细线框很好实现，所以就是要考虑图中的蓝色部分怎么实现。
开始初步尝试
如果您简单用过 Mapbox 就知道，一个图层不能对同一个地物套两种样式，本着一个图层实现不了就多叠几层的原则，当时觉得应该很好实现的，画一个粗线，再用 offset 做内移即可。
1. 加载两个 building 图层，数据类型都选择 Line，获得轮廓线。
2. 第一个图层基本保持默认即可。
3. 第二个图层，先用纯色做实验，设置 width 的二分之一进行 offset，嗯，效果不错的样子。
第一个障碍： Line Pattern
Mapbox 默认的线展示方法只能是纯色的，但可以用 pattern 来填充，既然刚才用纯色测试能够找出需要绘制的范围，那我岂不是自己设计一个斜线的 pattern 替换即可？
说做就做，先拿 Adobe AI 画了一个小方块出来：
30*30px，白色部分导出时设为透明
然后导出 svg 文件，导入到 Mapbox 中，激动人心的时刻到了！
当当！It works！
但等等！哪里不对？？？ 那个斜线的角度怎么绕着边缘转了一圈？
更可怕的是，边上那个结构比较复杂的房子，怎么成这样了？？
于是，第一次的尝试以失败告终。
第二个障碍： 不存在的Polygon offset
既然直接对轮廓线填充样式行不通，那我能不能先把整个面填好，把中间扣掉就好了？？
我画了个草图，假设荧光笔部分是地面的颜色，那么我只要把整个面填满，然后中间部分也设置为底色即可。
老规矩一个图层解决不了的事情就多叠几个图层，第一个外框线的图层就不说了，
第二个图层 Type 设为 Fill，然后用刚才设计的 Pattern 填充，看上去不错，感觉胜利女神在向我招手了呢！
接下来就是怎么利用第三个图层把中间的部分遮住了，准备—— 3 —— 2 —— 1：
！？？！？ Fill 类型不能设置 offset，只能按面的真实大小进行展示，这就。。。很尴尬了。
那么既然用面遮的方法行不通，那我就套用刚才的方式，把线多往回缩一点，然后挡住中间部分不就好了么？试试看！
图层类型重新改为 Line，然后设一个粗粗的 Width, 宽宽的 offset （为了方便区分，这个图层选择了深蓝色）。
然后，这这这？？都是些啥？ 为什么缩进后成了一个井字？然后还被拆开了？边上哪个小建筑的线怎么都到外面去了？？？
在迷茫的笼罩之下，此尝试彻底破产。
原因分析
回过头来冷静想了一下，发现了一些问题，然后经过证实，确实有很多现在需要注意的点，整理如下：
1. Offset功能
首先几何面不提供 offset 选项，这个如果底层不能实现，基本上我的这个设计思路就无解了，不知道 Mapbox 的工程师们看到了此文，能不能考虑增加一下？（露出有求于人不怀好意的微笑~）
其次我把线调细，重新看了一下 offset 的中心线，就会发现它其实只是线的向内位移，也难怪，就算在 CAD 里，对线的 offset，也只是向内位移，干嘛要改变线的长度呢？ 于是综合起来，Mapbox 的 offset 功能，对我而言就显得很鸡肋了。。。
理想在右，现实在左。。。
2. 奇怪的拆分
刚才有说到经过一通操作，我的建筑物区域内出现了两套“井”字，看上去像是两个分开的polygon 生成的，沿着这横平竖直的切口向上看去，好像同一条垂线上都有这个问题。
明白了，我这是…随便选的样区恰好遇到地图瓦片的接缝了（是的，我就是那么精准，夸我！）， 而线状和面状要素会在矢量瓦片中被打断而造成同一地物的分割，这是矢量瓦片技术暂时无法解决的弊端，恰好在我的需求中，成了压垮我的一个稻草。
3. 跑到外面的线
刚才吐槽了对这个小多边形进行了 offset 操作后，线为何在实体之外围了一圈，但其实很好解释，因为 Mapbox Studio 作为一个基于 WebGL 的平台，所有的参数都是以显示距离为单位（px），那么显然是不存在地图学中的所谓的拓扑检查的。
于是既然这个框太小，而移动距离太大，他就。。。跑到了另一边的界外了呗。。。然后Mapbox 又对相邻的边进行了强制连接，就给拉长成了一个大框。
但其实，放大之后，看上去又正常了那么一些。
Zoom Level：18
Zoom Level：21， 又是熟悉“井“字
总结
虽然这次设计效果的尝试最终以失败告终，不过这还是一次对 Mapbox 功能的深刻认识。
首先，呼吁 Polygon 的 offset 功能！（期待的搓手手~）
另外，这些参数设定都是从计算机显示的角度考虑的，因此一定要注意使用根据缩放尺度来调整样式的选项（style across zoom range），但其实这个的工作量很大，能不能考虑一下实现一个在某个 zoom level 设定好之后自动生成其他尺度下的等比例缩放？
最后，不论是刚才说的参数以 px 为值导致的不同大小的地物、不同缩放比例切换就会使经过变动的显示效果空间关系混乱，还是被矢量瓦片接缝打断形成破碎线、面状地物，都回归到一个问题：既然 Mapbox 作为一个专业的地图服务商，有没有可能实现一下在可视化阶段，从地图学的角度进行一下自动的空间拓扑关系检查?
好了，脑洞就开到这里，感谢阅读我这个无厘头风格的意识流行文。
小编说：替 Mapbox 团队感谢这位进行亲身实践并提出宝贵建议的开发者，将会获得官方奖励的 5000 积分哦！如果你也有类似的项目/心得/经历想要分享，或者想要认识这样优秀的从业者，请看下图！！